<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<style type="text/css">
#picture{
		position: absolute;
		right: 70px;
		top: 40px; 
		height: 200px;
		width:30%;
	}
	fieldset{
		height: 92%;
		border-radius: 5px;
		text-align:center;
		border:1px solid #000000;
	}
ul{
	list-style:none;
}

</style>
<div style="padding:10px 10px 0px 10px;position: relative;" >
    <form id="goodsInfoEditForm" name="goodsInfoEditForm" class="goodsInfoEditForm" method="post"  >
	    <table cellpadding="5">
	        <tr>
	            <td>商品标题:</td>
	            <td><input class="easyui-textbox" type="text" name="gTitle" data-options="required:true" style="width: 280px;"></input></td>
	        </tr>
	        <tr>
	            <td>商品卖点:</td>
	            <td><input class="easyui-textbox" name="gSellPoint" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td>
	        </tr>
	        <tr>
	            <td>商品价格:</td>
	            <td><input class="easyui-numberbox" type="text" name="gPrice" data-options="min:1,max:99999999,precision:2,required:true" />  	
	            </td>
	        </tr>
	        <tr>
	            <td>库存数量:</td>
	            <td><input class="easyui-numberbox" type="text" name="gnum" data-options="min:1,max:99999999,precision:0,required:true" /></td>
	        </tr> 
	        <tr>
	            <td>条形码:</td>
	            <td>
	                <input class="easyui-textbox" type="text" name="gBarcode" data-options="validType:'length[1,30]'" />
	                <input id="gMainImage"  name="gMainImage" type="hidden" />
	            </td>
	        </tr>
	        </table>
	        
	    </form>
	     <div id='picture'>
					<p>图片最适宽*高=300*240，宽高比例5:4</p>
					<fieldset id="article_artPic_show">
						<legend>图片预览</legend>
					</fieldset>
			</div>’
	        <table>
	        <tr>
	            <td>商品图片:</td>
	            <td>
	            <form id="mainImageForm" method="post" enctype="multipart/form-data" action="ued/config">
	            	<input type="file" name="upfile" onchange="getPic(this)">
	            	<input name="action" value="uploadimage" type="hidden">
	            	<a href="javascript:void(0)" class="easyui-linkbutton " id="btn_submit">点击上传主图</a>
	            </form>
	            </td>
	        </tr>
	    </table>
	    <div style="padding:5px;text-align: center;">
	    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitUpdateGoodsForm()">确认提交修改</a>
		</div>
</div>
<script type="text/javascript">
$(function(){
	$("#goodsInfoEditForm [name=gTitle]").val($('#goodsData').datagrid('getSelected').gTitle);
	$("#goodsInfoEditForm [name=gSellPoint]").val($('#goodsData').datagrid('getSelected').gSellPoint);
	$("#goodsInfoEditForm [name=gPrice]").val($('#goodsData').datagrid('getSelected').gPrice/100);
	$("#goodsInfoEditForm [name=gnum]").val($('#goodsData').datagrid('getSelected').gnum);
	$("#goodsInfoEditForm [name=gBarcode]").val($('#goodsData').datagrid('getSelected').gBarcode);
	$("#goodsInfoEditForm [name=gMainImage]").val($('#goodsData').datagrid('getSelected').gMainImage);
	var imgStr= "<img src='"+$('#goodsData').datagrid('getSelected').gMainImage+"'  style='height:144px;width:180px'/>";
	document.getElementById("article_artPic_show").innerHTML = imgStr;

	//主图上传事件
	$('#btn_submit').bind('click', function(){  
		if($("#mainImageForm [name=upfile]").val()==""&&$("#mainImageForm [name=upfile]").val()==null){
			$.messager.alert('提示','请先选择要上传的图片!','info');
			return;
		}
			$.messager.progress();	// 显示一个进度条 
			$('#mainImageForm').form('submit',{
				url:'ued/config',
			    	success:function(data){
			    			$("#gMainImage").val(JSON.parse(data).url);
			    			$.messager.progress('close');	// 当成功提交之后隐藏进度条
				    		$.messager.show({
				    			title:'提示',
				    			msg:'主图上传成功',
				    			timeout:4000,
				    			showType:'slide'
				    		});
			    }
			}); 
	    }); 

});
function getPic(objs){
	var files=objs.files;
	var picPath=window.URL.createObjectURL(files[0]);
	var imgStr= "<img src='"+picPath+"'  style='height:144px;width:180px'/>";
	document.getElementById("article_artPic_show").innerHTML = imgStr;
}
function submitUpdateGoodsForm(){
	 if(!$('#goodsInfoEditForm').form('validate')){
			$.messager.alert('提示','表单还未填写完成!',"info");
			return ;
	 }
	$.messager.progress();	// 显示一个进度条 
	 $.post("goods/updateGoods",{
		 gId:$('#goodsData').datagrid('getSelected').gId,
		 gTitle:$("#goodsInfoEditForm [name=gTitle]").val(),
		 gSellPoint:$("#goodsInfoEditForm [name=gSellPoint]").val(),
		 gPrice:$("#goodsInfoEditForm [name=gPrice]").val()*100,
		 gnum:$("#goodsInfoEditForm [name=gnum]").val(),
		 gBarcode:$("#goodsInfoEditForm [name=gBarcode]").val(),
		 gMainImage:$("#goodsInfoEditForm [name=gMainImage]").val()
	 },function(data){
		if(data.status==200){
			$.messager.show({
    			title:'提示',
    			msg:'更新商品主体信息成功',
    			timeout:4000,
    			showType:'slide'
    		});
			$('#goodsData').datagrid('reload');//刷新商品表格信息
		}else{
			$.messager.alert('提示',data.data,'info');
		}
	}); 
	 
	 $.messager.progress('close');	// 当成功提交之后隐藏进度条
	 
}
</script>